<template>
  <div class="md:flex">
    <template v-for="(item, index) in cardList" :key="item.title">
      <Card
        size="small"
        :loading="loading || orderLoading || userVerifyLoading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <CountTo :prefix="item.title === '订单额' ? '¥' : ''" :startVal="1" :endVal="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>
            {{ item.title === '已实名用户数' ? '小程序用户总数' : item.title === '订单额' ? '完结工单总数' : '总' + item.title }}
          </span>
          <CountTo :prefix="item.title === '订单额' ? '' : ''" :startVal="1" :endVal="item.total" />
        </div>

        <!-- 显示错误信息 -->
        <div v-if="item.title === '订单额' && orderError" class="p-2 px-4 text-red-500 text-xs">
          {{ orderError }}
        </div>
        <div v-if="item.title === '已实名用户数' && userVerifyError" class="p-2 px-4 text-red-500 text-xs">
          {{ userVerifyError }}
        </div>

        <!-- 显示额外信息 -->
        <div v-if="item.footer" class="p-2 px-4 text-gray-500 text-xs">
          {{ item.footer }}
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';
  import { growCardList } from '../data';
  import { useOrderStats } from '../hooks/useOrderStats';
  import { useUserVerifyStats } from '../hooks/useUserVerifyStats';

  defineProps({
    loading: {
      type: Boolean,
    },
  });

  // 使用订单统计Hook
  const { loading: orderLoading, error: orderError, getOrderCardData } = useOrderStats();

  // 使用用户实名统计Hook
  const { loading: userVerifyLoading, error: userVerifyError, getUserVerifyCardData } = useUserVerifyStats();

  // 合并原有数据、订单数据和用户实名数据
  const cardList = computed(() => {
    const originalList = [...growCardList];

    // 找到订单额卡片的索引
    const orderCardIndex = originalList.findIndex((item) => item.title === '订单额');
    if (orderCardIndex !== -1) {
      originalList[orderCardIndex] = getOrderCardData();
    }

    // 找到已实名用户数卡片的索引
    const userVerifyCardIndex = originalList.findIndex((item) => item.title === '已实名用户数');
    if (userVerifyCardIndex !== -1) {
      originalList[userVerifyCardIndex] = getUserVerifyCardData();
    }

    console.log('cardList------', originalList);

    return originalList;
  });
</script>
